<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>系统常态化运行评分系统</title>
    <link rel="stylesheet" href="../component/pear/css/pear.css" />
    <style>
        .expand.pear-btn:hover {
            color: currentColor;
            background: none;
        }

        .expand.pear-btn {
            border: 1px solid rgba(255, 255, 255, 0)
        }
        .layui-table-tool-temp {
            display: flex;
            justify-content: flex-end;
            padding-right: 0;
        }

        .input-number{
            border: none; /* 移除边框 */
            border-bottom: 1px solid #000; /* 设置下划线样式 */
            outline: none; /* 移除轮廓 */
            background: transparent; /* 背景透明 */
            font-size: 16px; /* 字体大小 */
            padding: 5px 0; /* 内边距 */
            -webkit-appearance: none; /* 移除默认样式 */
            margin: 0;
            width: 60px;
            text-align: center;
        }
        /* 当输入框获得焦点时的样式 */
        .input-number:focus {
            border-bottom: 2px solid #007bff; /* 下划线变粗并改变颜色 */
        }
    </style>
    <script src="../component/layui/layui.js"></script>
    <script src="../component/pear/pear.js"></script>
    <script src="../scripts/utils/request.js"></script>
    <script src="../scripts/utils/auth.js"></script>
    <script src="../scripts/utils/tinymceUtils.js"></script>
    <script src="../scripts/pfeval.js"></script>
    <script>
        var detailContent = {}
        function getData() {
            return detailContent;
        }
        var id = getUrlParams('id');
        var systemName = getUrlParams('systemName')
        var systemId = getUrlParams('systemId')
        var type = '';
        var totalScore = getUrlParams('totalScore');
        var weight = getUrlParams('weight');
        var myScore = 0;
        var mineId;
        // var type = 'check'
        var $, table, form, drawer, popup, notice, laydate, upload
        layui.use(['table', 'form', 'jquery', 'drawer', 'popup', 'notice', 'laydate', 'tinymce', 'util', 'layer', 'upload'], function () {
            table = layui.table;
            form = layui.form;
            $ = layui.jquery;
            drawer = layui.drawer;
            popup = layui.popup;
            notice = layui.notice;
            laydate = layui.laydate;
            tinymce = layui.tinymce;
            layer = layui.layer;
            util = layui.util;
            upload = layui.upload;

            postAjaxNoSuccessTipAsync('/api/pf/pfItemListStateHy',{"id":id,"systemId":systemId},function(res){
                type=res.data.state==2?'check':'hycheck';
                mineId=res.data.mineId;
            })

            $('#totalScore').text(totalScore);
            $('#weight').text(weight);
            $('#totalScoreCount').text(totalScore * weight);
            var iskQ = localStorage.getItem('roleType') == 3

            // id为isystemName 值是系统名称
            if(systemName.indexOf('掘进')!=-1){
                $("#systemName").text(systemName+'(核验)(如不评分按0.6系数得分)')
            }else{
                $("#systemName").text(systemName+'(核验)')
            }
            
            console.log(id, systemName, systemId, type);
            laydate.render({
                elem: '#checkTime'
            });
            var tabData = []
            table.render({
                id: "user-table",
                elem: '#user-table',
                toolbar: '#toolbarDemo',
                defaultToolbar: [],
                url: baseURL + '/api/pf/pfItemList',
                method: 'post',
                contentType: 'application/json',
                page: false,
                loading: true,
                headers: {
                    token: localStorage.getItem("token")
                },
                where: {
                    systemId: systemId,
                    id: id
                },
                height: 'full-35',
                lineStyle: 'min-height: 95px;',
                cols: [[
                    { type: 'numbers', title: '序号', width: 60, },
                    {
                        field: 'content', width: 150,align:'center', title: '考核项', templet: function (d) {
                            console.log(type, '****');
                            return `<span class="jtip" data-tip="${d.pfMethod}">${d.content}</span>`
                        }
                    },

                    {
                        field: 'zbContent', width: 250, title: '指标内容', templet: function (d) {
                            return `<span class="jtip" data-tip="${d.pfMethod}">${d.zbContent}</span>`
                        }
                    },
                    { field: 'pfMethod', width: 250, title: '评分方法', },
                    { field: 'zbTotalScore', width: 100, title: '指标满分', align: 'center' },
                    { field: 'respPfItemDetailsListList', minWidth: 200, title: '指标量化', templet: type == 'check' ? '#ID-table-check' : '#ID-table-KQ' },
                    { field: 'hyScore', width: 100, title: '指标得分', align: 'center' },
                ]],
                skin: 'grid',
                done: function (res, curr, count) {
                    myScore = getTotalHyScore(res.data);
                    var totalRow = '<tr class="total-row"><td colspan="5" style="text-align: center;font-weight:bold;font-size:30px;">总分</td><td colspan="2" style="font-size:30px;"  class="jCore myscore" >' + myScore + '</td></tr>';
                    let tbodyT = $('.layui-table-body,.layui-table-main').find('table').find('tbody');
                    tbodyT.append(totalRow);
                    validToken(res);
                    if (res.code === 0) {
                        tabData = res.data
                        if (type == 'check') {
                            $('.jShouButton').hide()
                        }
                    }
                }
            });


            // // 添加鼠标悬停事件
            // $(document).on('mouseenter', '.jtip', function () {
            //     const score = $(this).data('tip'); // 获取 systemName
            //     layer.tips('评分方法：' + score, this, {
            //         tips: [1, '#16b777'], // 气泡样式，第一个参数为气泡的角标位置，第二个参数为气泡背景色
            //         time: 0 // 不自动关闭
            //     });
            // });
            // // 或者，如果您需要在鼠标离开时执行某些操作，可以使用 mouseleave
            // $(document).on('mouseleave', '.jtip', function () {
            //     // 悬停结束时的逻辑
            //     layer.closeAll('tips');
            // });
            // 添加鼠标悬停事件
            $(document).on('mouseenter', '.jpfZbDetails', function () {
                const score = $(this).data('mydata') ? $(this).data('mydata') : '暂无'// 获取 systemName
                layer.tips(score+'<br/><span style="color:blue">点击查看指标佐证材料</span>', this, {
                    tips: [1, '#16b777'], // 气泡样式，第一个参数为气泡的角标位置，第二个参数为气泡背景色
                    time: 0 // 不自动关闭
                });
            });
            // 或者，如果您需要在鼠标离开时执行某些操作，可以使用 mouseleave
            $(document).on('mouseleave', '.jpfZbDetails', function () {
                // 悬停结束时的逻辑
                layer.closeAll('tips');
            });
            $(document).on('click', '.jpfZbDetails', function () {
                let codeId = $(this).data('codeid'); // 获取索引
                layer.open({
                    type: 2,
                    offset: 'r',
                    title: '指标溯源详情',
                    anim: 'slideLeft', // 从右往左
                    area: ['75%', '100%'],
                    shade: 0.1,
                    shadeClose: true,
                    content: "./pfsystemdetailsCl.html?zbDetailsId="+zbdetailsid+"&codeId=" + codeId + "&mineId="+mineId+"&pfId="+id
                });
            });

            // 事件绑定
            $(document).on('blur', 'input[lay-event="tabInput"]', function () {
                // 获取当前输入框的数据
                var newValue = $(this).val();
                var index = $(this).data('index'); // 获取索引
                var bigId = $(this).data('myid')+''; // 获取索引

                // 在这里可以处理数据，例如调用保存接口
                const zbData = tabData.find(function (item) {
                    return item.id == bigId; // 匹配对应的 id
                });
                const zbDetails = zbData.respPfItemDetailsListList;
                if(zbDetails[index].systemZbDetailsId!='172'&&newValue<0){
                    notice.error('请输入大于等于0的数字');
                    $(this).val('');
                    return;
                }
                const pfZbDetailsContentArr = []
                // 获取zbDetails这个数组里，所有关于pfZbDetailsContent的字段
                zbDetails.forEach(element => {
                    pfZbDetailsContentArr.push(element.hyZbDetailsContent)
                });
                pfZbDetailsContentArr[index] = newValue; // 修改对应索引的值
                // TODO: 发送请求保存修改（使用 AJAX）
                pfZbDetailsContentArr.push(zbData.zbTotalScore)

                let params=arrayToStringWithNull(pfZbDetailsContentArr)
                // 这个str就是zbCore
                const str = `eval_${zbData.systemZbId}(${params})`
                let zbScore=eval(str);
                const reqData = {
                    zbDetailsContent: pfZbDetailsContentArr[index],
                    pfSystemId: zbData.pfSystemId,
                    pfSystemZbDetailsId: zbDetails[index].id,
                    pfSystemZbId: zbDetails[index].pfSystemZbId,
                    zbScore: zbScore,
                };
                var tableData = table.cache['user-table'];
                let tableDataItem= tableData.find(x=>x.id==bigId);
                tableDataItem.respPfItemDetailsListList[index].hyZbDetailsContent=newValue;
                tableDataItem.hyScore=zbScore;
                table.updateRow('user-table',{
                    index:zbData.LAY_INDEX,
                    data:{
                        hyScore:zbScore
                    },
                    related:true
                })
                myScore = getTotalHyScore(tableData);
                $('.jCore.myscore').html(myScore);
                postAjaxNoSuccessTipNoLoading('/api/pf/savePfItemZp', reqData, function (response) {
                   
                },  function(){
                    table.reload('user-table');
                });
            });

            // 指标答案选择
            // 监听开关事件
            form.on('switch(switchCheck)', function (data) {
                // 获取当前开关的状态
                var isChecked = data.elem.checked; // true 表示开关是打开状态
                var index = $(this).data('index'); // 获取索引
                var bigId = $(this).data('myid')+''; // 获取索引

                // 在这里可以处理数据，例如调用保存接口
                const zbData = tabData.find(function (item) {
                    return item.id == bigId; // 匹配对应的 id
                });
                const zbDetails = zbData.respPfItemDetailsListList;
                const pfZbDetailsContentArr = []
                // 获取zbDetails这个数组里，所有关于pfZbDetailsContent的字段
                zbDetails.forEach(element => {
                    pfZbDetailsContentArr.push(element.hyZbDetailsContent)
                });
                pfZbDetailsContentArr[index] = isChecked ? 1 : 0;
                pfZbDetailsContentArr.push(zbData.zbTotalScore)
                let params=arrayToStringWithNull(pfZbDetailsContentArr)
                // 这个str就是zbCore
                const str = `eval_${zbData.systemZbId}(${params})`
                let zbScore=eval(str);
                const reqData = {
                    zbDetailsContent: pfZbDetailsContentArr[index],
                    pfSystemId: zbData.pfSystemId,
                    pfSystemZbDetailsId: zbDetails[index].id,
                    pfSystemZbId: zbDetails[index].pfSystemZbId,
                    zbScore: zbScore,
                };
                var tableData = table.cache['user-table'];
                let tableDataItem= tableData.find(x=>x.id==bigId);
                tableDataItem.respPfItemDetailsListList[index].hyZbDetailsContent=isChecked ? 1 : 0;
                tableDataItem.hyScore=zbScore;
                table.updateRow('user-table',{
                    index:zbData.LAY_INDEX,
                    data:{
                        hyScore:zbScore
                    },
                    related:true
                })
                myScore = getTotalHyScore(tableData);
                $('.jCore.myscore').html(myScore);
                postAjaxNoSuccessTipNoLoading('/api/pf/savePfItemZp', reqData, function (response) {
                    
                }, function(){
                    table.reload('user-table');
                });
            });
            $('.jClick').on('click', function () {
                layer.confirm('确定提交评分，一旦提交无法进行修改？', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    layer.close(index);
                    console.log('点击了确定');
                    const reqData = {
                        pfSystemId: tabData[0].pfSystemId,
                        zpRemark: null,
                    };
                    postAjax('/api/pf/commitPfSystem', reqData, function (response) {
                        if (response.code === 0) {
                            changeCheck()
                        }
                    }, null);
                });

            })
            /**
             * 重新加载table
             */
            function changeCheck() {
                type = 'check'
                table.reload('user-table', {
                    cols: [[
                        { type: 'numbers', title: '序号', width: 60, },
                        {
                            field: 'content', width: 150, title: '考核项', templet: function (d) {
                                return `<span class="jtip" data-tip="${d.pfMethod}">${d.content}</span>`
                            }
                        },

                        {
                            field: 'zbContent', width: 260, title: '指标内容', templet: function (d) {
                                return `<span class="jtip" data-tip="${d.pfMethod}">${d.zbContent}</span>`
                            }
                        },
                        // { field: 'pfMethod', width: 260, title: '评分方法', },
                        { field: 'zbTotalScore', width: 100, title: '指标满分', align: 'center' },
                        { field: 'respPfItemDetailsListList', minWidth: 200, title: '指标量化', templet: '#ID-table-check' },
                        { field: 'hyScore', width: 100, title: '指标得分', align: 'center' },
                    ]],
                    done: function (res, curr, count) {
                        myScore = getTotalHyScore(res.data);
                        var totalRow = '<tr class="total-row"><td colspan="5" style="text-align: center;font-weight:bold;">总分</td><td colspan="2" class="jCore myscore" >' + myScore + '</td></tr>d></td></tr>';
                        let tbodyT = $('.layui-table-body,.layui-table-main').find('table').find('tbody');
                        tbodyT.append(totalRow);
                        if (res.code === 0) {
                            $('.jShouButton').hide()
                        }
                        // parent.layui.admin.refresh('pfSystem' + id);
                    }
                });
            }
        })
    </script>
</head>

<body class="pear-container">
    <div id="divCardHeader" class="layui-card-header container"
    style="height: 70px; background-color: #fff;padding: 0;">
    <div class="left-div">
        <div id="systemName" class="layui-font-black layui-font-22" style="height: 34px;text-align: center;"></div>
        <div id="systemWeight" class=" layui-font-gray layui-font-16" style="text-align: center;">
            (指标满分<span id="totalScore"></span> 分,权重 <span id="weight"></span>,总得分计入 <span
                id="totalScoreCount"></span>
            分)
        </div>
    </div>
    <div class="right-div">
        <div class="jShouButton">
            <button class="layui-btn pear-btn-primary layui-bg-blue jClick" lay-event="getCheckData">
                <i class="layui-icon layui-icon-success"></i>
                提交</button>
           </div>
    </div>
</div>
    <div class="layui-card">
        <script type="text/html" id="toolbarDemo">
          
        </script>
        <div class="layui-card-body">
            <table id="user-table" lay-filter="user-table"></table>

            <!-- 如果是陕北矿业显示这个 -->
            <script type="text/html" id="ID-table-KQ">
                <div id="zbDetailsKQ">
                    {{# if(d.respPfItemDetailsListList && d.respPfItemDetailsListList.length) { }}
                        {{# for(var i = 0; i < d.respPfItemDetailsListList.length; i++) { }} <!-- 使用 for 循环 -->
                        <div class="custom-class-container " style="align-items: center;cursor: pointer;">
                            <span 
                            class="detial jpfZbDetails" 
                            data-codeId="{{d.respPfItemDetailsListList[i].systemZbDetailsCodeId}}" 
                            data-zbDetailsId="{{d.respPfItemDetailsListList[i].systemZbDetailsId}}"
                            data-myData="{{ d.respPfItemDetailsListList[i].zbDetailsRemark }}"
                            style="color: blue;">
                                {{ d.respPfItemDetailsListList[i].pfZbDetails }}
                            </span>
                          <div>
                            {{# if(d.respPfItemDetailsListList[i].pfZbDetailsType==1){ }}
                            <input type="checkbox" 
                            value="{{= d.respPfItemDetailsListList[i].hyZbDetailsContent }}" 
                            title="是|否" 
                            lay-skin="switch" 
                            lay-filter="switchCheck" 
                            data-myid="{{ d.id }}" 
                            data-index="{{ i }}"
                            {{ d.respPfItemDetailsListList[i].hyZbDetailsContent == 1 ? "checked" : "" }}>  
        {{# } else if(d.respPfItemDetailsListList[i].pfZbDetailsType==2){ }}
        <input
        type="number" 
        lay-event='tabInput'
        class="input-number"   
        data-index="{{ i }}" 
        data-myid="{{ d.id }}" 
          value="{{=d.respPfItemDetailsListList[i].hyZbDetailsContent}}" class="" /> <span class="">{{d.respPfItemDetailsListList[i].pfZbDetailsUnit }}</span>
        {{# } }}
                          </div>
                          </div>
                           
                        {{# } }} <!-- 关闭 for 循环 -->
                    {{# } else { }}
                        <div class="custom-class">无详情</div> <!-- 默认内容 -->
                    {{# } }}
                </div>
            </script>
            <script type="text/html" id="ID-table-check">
                <div id="zbDetailsKQ">
                    {{# if(d.respPfItemDetailsListList && d.respPfItemDetailsListList.length) { }}
                        {{# for(var i = 0; i < d.respPfItemDetailsListList.length; i++) { }} <!-- 使用 for 循环 -->
                        <div class="custom-class-container " style="align-items: center;cursor: pointer;">
                            <span 
                            class="detial jpfZbDetails" 
                            data-codeId="{{d.respPfItemDetailsListList[i].systemZbDetailsCodeId}}" 
                            data-zbDetailsId="{{d.respPfItemDetailsListList[i].systemZbDetailsId}}"
                            data-myData="{{ d.respPfItemDetailsListList[i].zbDetailsRemark }}"
                            style="color: blue;">
                                {{ d.respPfItemDetailsListList[i].pfZbDetails }}
                            </span>
                          <div>
                            {{# if(d.respPfItemDetailsListList[i].pfZbDetailsType==1){ }}
                            <input type="checkbox" 
                            value="{{= d.respPfItemDetailsListList[i].hyZbDetailsContent }}" 
                            title="是|否" 
                            lay-skin="switch" 
                            disabled
                            lay-filter="switchCheck" 
                            data-myid="{{ d.id }}" 
                            data-index="{{ i }}"
                            {{ d.respPfItemDetailsListList[i].hyZbDetailsContent == 1 ? "checked" : "" }}>  
        {{# } else if(d.respPfItemDetailsListList[i].pfZbDetailsType==2){ }}
        <input
        type="number" 
        lay-event='tabInput'
        class="input-number"   
        disabled
        data-index="{{ i }}" 
        data-myid="{{ d.id }}" 
          value="{{=d.respPfItemDetailsListList[i].hyZbDetailsContent}}" class="" /> <span class="">{{d.respPfItemDetailsListList[i].pfZbDetailsUnit }}</span>
        {{# } }}
                          </div>
                          </div>
                           
                        {{# } }} <!-- 关闭 for 循环 -->
                    {{# } else { }}
                        <div class="custom-class">无详情</div> <!-- 默认内容 -->
                    {{# } }}
                </div>
            </script>
        </div>
    </div>



</body>
<style>
    /* 容器样式 */
    .custom-class-container {
        display: flex;
        /* 使用 Flexbox 布局 */
        align-items: center;
        /* 垂直居中 */
        justify-content: space-between;
        /* 子元素左右分布，第一个在左，最后一个在右 */
        margin-bottom: 5px;
        /* 外边距 */
        border-bottom: 1px solid #ccc;
        /* 底部边框 */
    }

    /* 第一个 span 样式，确保内容换行 */
    .detial {
        word-wrap: break-word;
        /* 内容在到达边缘时换行 */
        overflow-wrap: anywhere;
        /* 允许在任意字符处断行 */
        /* 可以设置一个最大宽度，比如 100px 或其他值 */
        max-width: 400px;
        margin-right: 4px;
    }

    /* 所有 span 和 button 的样式，这里使用了统一的类名 */
    .custom-class span,
    #ID-upload-demo-files-action {
        margin-left: 5px;
        /* 左边距，除了第一个 span */
    }

    /* 按钮样式，靠右 */
    #ID-upload-demo-files-action {
        margin-left: auto;
        /* 自动左边距，将按钮推到右侧 */
    }

    /*设置数据表表头字体*/
    .layui-table th {
        /*表头内容居中显示*/
        text-align: center;
    }
    .myscore{
        text-align: center;
        font-size: 18px;
        font-weight: 700;
    }
    .container {
        display: flex;
        /* 使用 Flexbox 布局 */
        align-items: center;
        /* 上下居中 */
    }

    .left-div {
        flex-grow: 1; /* 让第一个 div 跨越剩余空间 */
        text-align: center; /* 文本水平居中 */
    }

    .right-div {
        margin-left: auto; /* 确保第二个 div 向右对齐 */
    }
</style>

</html>